<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../js/vue@2.7.16.js"></script>
    <title>自定义指令_函数式</title>
  </head>
  <body>
    <div id="app">
      <h2>当前值：<span v-text="num"></span></h2>
      <h2>放大十倍值：<span v-big="num"></span></h2>
      <button @click="num++">点击</button>

      <input type="text" v-fbind="num" />
    </div>
  </body>

  <script>
    const vm = new Vue({
      el: "#app",
      data: { num: 10 },
      directives: {
        // 指令所在模板被重新解析时
        big(el, binding) {
          el.innerText = binding.value * 10;
        },
        fbind: {
          bind(el, binding) {
            console.log("bind");
            el.value = binding.value;
          },
          inserted(el, binding) {
            console.log("inserted");
            el.focus();
          },
          update(el, binding) {
            console.log("update");
            el.value = binding.value;
            el.focus();
          },
        },
      },
    });
  </script>
</html>
